<template>
    <span style="width: 30px;display: inline-block;">
        <TinyLineChart v-bind="config" />
    </span>
</template>

<script>
import { TinyLineChart } from '@opd/g2plot-vue'
export default {
    name: 'RenderChartItem',
    components: {
        TinyLineChart
    },
    data() {
        return {
            config: {
                height: 24,
                width:30,
                autoFit: true,
                smooth: true,
                lineStyle:{
                    stroke: 'red',
                    lineWidth: 1,
                    strokeOpacity: 0.6
                },
                meta: {
                    value: {
                        max: 15,
                    },
                },
                data: this.dataArr,
            },
        }
    },
    props: {
        dataArr: {
            type: Array,
            required: true
        },
        title: {
            type: String,
            required: false
        }
    },
    mounted() {
    },
    methods: {
        randomData(num, max, min) {
            const data = [];
            for (let i = 0; i < num; i++) {
                data.push({
                    index: String(i),
                    value: min + Math.random() * (max - min),
                });
            }
            return data;
        }
    }
};
</script>

<style scoped></style>